<!--个人中心-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap start Template</title>
    <!--font-awesome-->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link href="table/css/bootstrap.min.css" rel="stylesheet">
    <link href="table/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <style>
    /*删除了一点代码，如有异常，请找回*/
/*Navigation*/
.sidebar-nav {
  width: 240px;
  position: absolute;
  float: left;
  border-top: none;
  border-left: none;
  margin: 0em;
}
.sidebar-nav .nav-header {
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #c8c8cb;
  border-left: none;
  color: #333;
  display: block;
  background: #efeff0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #efeff0), color-stop(1, #ffffff));
  background: -ms-linear-gradient(bottom, #efeff0, #ffffff);
  background: -moz-linear-gradient(center bottom, #efeff0 0%, #ffffff 100%);
  background: -o-linear-gradient(bottom, #efeff0, #ffffff);
  filter: progid:dximagetransform.microsoft.gradient(startColorStr='#4d5b76', EndColorStr='#6c7a95');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#efeff0')";
  font-weight: normal;
  font-size: 1em;
  line-height: 2.5em;
  padding: 0em .25em;
  margin-bottom: 0px;
  text-shadow: none;
  text-transform: none;
  /*Change the arrow direction if the item is collapsed*/

}
.sidebar-nav .nav-header .label {
  float: right;
  margin-top: .5em;
  margin-right: .25em;
  line-height: 1.5em;
}
.sidebar-nav .nav-header:hover {
  background: #efeff0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #efeff0), color-stop(1, #ffffff));
  background: -ms-linear-gradient(bottom, #efeff0, #ffffff);
  background: -moz-linear-gradient(center bottom, #efeff0 0%, #ffffff 100%);
  background: -o-linear-gradient(bottom, #efeff0, #ffffff);
  filter: progid:dximagetransform.microsoft.gradient(startColorStr='#4d5b76', EndColorStr='#6c7a95');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#efeff0')";
}
.sidebar-nav .nav-header.collapsed .icon-chevron-up::before {
  content: "\f078";
}
.sidebar-nav .nav-header .icon-chevron-up {
  float: right;
}
.sidebar-nav .nav-header .label {
  float: right;
  margin-top: .7em;
  line-height: 1.5em;
}
.sidebar-nav .nav-header i[class^="icon-"] {
  margin-right: .75em;
}
.sidebar-nav .nav-list {
  margin: 0px;
  border: 0px;
  background: #f6f6f6;
}
.sidebar-nav .nav-list  > li > a:hover {
  background: #e0e0e8;
}
.sidebar-nav .nav-list  > .active > a,
.sidebar-nav .nav-list  > .active > a:hover {
  background: #d2d2dd;
  color: #555;
  text-shadow: none;
}
.sidebar-nav .nav-list  > .active > a:hover {
  background: #c3c3d2;
}
.sidebar-nav .nav-list  > li > a {
  color: #444;
  padding: .5em 1em;
}
.sidebar-nav .nav-list.collapse.in {
  border-bottom: 1px solid #ccc;
}
.content {
  min-width: 400px;
  position: relative;
  min-height: 560px;
  background: #fff;
  margin-left: 240px;
  border-left: 1px solid #cccccc;
  border-left: 3px solid #999999;
}

    </style>
    <!--数据表格样式CSS-->
    <style>
        .update {
            color: #333;
            margin-right: 5px;
        }

        .remove {
            color: red;
            margin-left: 5px;
        }

        .alert {
            padding: 0 14px;
            margin-bottom: 0;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="container-fluid">

    <!--数据表格--begin-->
    <div class="container">
        <p class="toolbar">
            <a class="create btn btn-default" href="javascript:">创建新记录</a>
            <span class="alert"></span>
        </p>
        <table id="table"
               data-show-refresh="true"
               data-show-columns="true"
               data-search="true"
               data-query-params="queryParams"
               data-toolbar=".toolbar">
            <thead>
            <tr>
                <th data-checkbox="true" data-maintain-selected="true" checkboxEnabled="true"></th>
                <th data-field="name">用户名</th>
                <th data-field="password">密码</th>
                <th data-field="action"
                    data-align="center"
                    data-formatter="actionFormatter"
                    data-events="actionEvents">操作
                </th>
            </tr>
            </thead>
        </table>
    </div>
    <!--数据表格--end-->
    <!--新增修改面板-->
    <div id="modal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <div class="input-group">
                        <span class="input-group-addon">用户名</span>
                        <input class="form-control" type="text" name="name" id="name">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon">密码</span>
                        <input class="form-control" type="text" name="password" id="password">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary submit" onclick="checkOne()">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

</div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="table/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="table/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<!--tempo-->
<script src="tempo-2.0/tempo.js"></script>
<script src="tempo-2.0/tempo.min.js"></script>
<script src="layer/layer.js"></script>
<!--数据表格js-->
<script>
    var isOne=0;
    var update=0;
    var rowId;

    function checkOne(){

        teaWorkPer=parseFloat($("#teaWorkPer").val());
        stuWorkPer=parseFloat($("#stuWorkPer").val());
        isOne=teaWorkPer + stuWorkPer;
        if(isOne==1){
            isOne=1;
        }
    }

    var $table = $('#table').bootstrapTable({
                url: "/login/query",
                toolbar: '#toolbar', //工具按钮用哪个容器
                //striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
                //queryParams: postQueryParams,//传递参数（*）
                //sidePagination: "server",      //分页方式：client客户端分页，server服务端分页（*）
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                strictSearch: true,
                //height: table_h, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度,设置了行高后编辑时标头宽度不会随着下面的行改变，且颜色也不会改变？？？？
                uniqueId: "id", //每一行的唯一标识，一般为主键列
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                paginationHAlign: "left",
                singleSelect: true,
                search: true,               //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
                //strictSearch: true,
                showColumns: true, //是否显示所有的列
                showRefresh: true, //是否显示刷新按钮
                clickToSelect: true, //是否启用点击选中行
                paginationPreText: "<<",
                paginationNextText: ">>"
            }),
            $modal = $('#modal').modal({show: false}),
            $alert = $('.alert').hide();

        // create event创建事件
        $('.create').click(function () {
            showModal($(this).text());
            update=2;
        });

    function queryParams(params) {
        return {};
    }

    function actionFormatter(value) {
        return [
            '<a class="update" href="javascript:" title="修改数据"><i class="glyphicon glyphicon-edit"></i></a>',
            '<a class="remove" href="javascript:" title="删除数据"><i class="glyphicon glyphicon-remove-circle"></i></a>',
        ].join('');
    }

    // update and delete events
    window.actionEvents = {
        'click .update': function (e, value, row) {
            showModal($(this).attr('title'), row);
            rowId=row.id;
            update=1;
        },

        'click .remove': function (e, value, row) {
            if (confirm('确定要删除这项记录吗?')) {
                $.ajax({
                    url: "/login/delete/"+ row.id,
                    type: 'delete',
                    success: function () {
                        $table.bootstrapTable('refresh');
                        showAlert('Delete item successful!', 'success');
                    },
                    error: function () {
                        showAlert('Delete item error!', 'danger');
                    }
                })
            }
        }
    };

    $(function () {
            $modal.find('.submit').click(function () {
                var row = {};
                $modal.find('input[name]').each(function () {
                    row[$(this).attr('name')] = $(this).val();
                });

                if(update==2){
                    url="/login/insert";
                    type="post";
                }
                else if(update==1){
                    url="/login/update/"+ rowId;
                    type="put";
                }
                    if(isOne==1){

                    $.ajax({
                        url: url,
                        type: type,
                        contentType: 'application/json',
                        data: JSON.stringify(row),
                        success: function () {
                            $modal.modal('hide');
                            $table.bootstrapTable('refresh');
                            showAlert(('操作') + '  成功!', 'success');
                        },
                        error: function () {
                            $modal.modal('hide');
                            showAlert(('操作') + '  失败!', 'danger');
                        }
                    });

                    isOne=0;}else{
                        alert("工作量之和不为1，请重新输入");
                    }
            });
    });

    function showModal(title, row) {
        row = row || {
                    id: '',
                    state: 0
                }; // default row value
        $modal.data('id', row.code);
        $modal.find('.modal-title').text(title);
        for (var name in row) {
            $modal.find('input[name="' + name + '"]').val(row[name]);
        }
        $modal.modal('show');
    }

    //显示结果信息，3秒后关闭
    function showAlert(title, type) {
        $alert.attr('class', 'alert alert-' + type || 'success')
                .html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
        setTimeout(function () {
            $alert.hide();
        }, 3000);
    }
</script>
</html>